<div class="login-form">
    <h3 class="login-form__title">Welcome to Converse Desktop</h3>
    <div class="login-form__description">Jabber/XMPP client based on Converse.js and Electron</div>
    <div class="login-form__card">
        <form name="accountForm" ng-controller="LoginController">
            <div class="login-form__wrapper">
                <div class="login-form__input-group">
                    <span class="group-prepend oi" data-glyph="link-intact"></span>
                    <input ng-model="credentials.connectionManager" class="login-form__input login-form__input--with-append" type="text" placeholder="Connection manager url" required>
                    <span class="group-append--backgrounded oi" data-glyph="info" ng-click="showHelp('connectionManager')"></span>
                </div>
                <div class="login-form__input-help" ng-show="help.connectionManager == true"">
                    <div>
                        Should be a
                        <a href="https://m.conversejs.org/docs/html/setup.html#bosh-section" target="_blank">BOSH service</a>
                         or a
                        <a href="https://m.conversejs.org/docs/html/setup.html#websocket-section" target="_blank">Websocket</a>
                         URL
                    </div>
                </div>
            </div>
            <div class="login-form__wrapper">
                <div class="login-form__input-group">
                    <span class="group-prepend oi" data-glyph="person"></span>
                    <input ng-model="credentials.login" class="login-form__input" type="text" placeholder="jid@jabber.org" required>
                </div>
            </div>
            <div class="login-form__wrapper">
                <div class="login-form__input-group">
                    <span class="group-prepend oi" data-glyph="lock-locked"></span>
                    <input ng-model="credentials.password" class="login-form__input" type="password" placeholder="Password" required>
                </div>
            </div>
            <div class="login-form__wrapper">
                <button class="login-form__button" ng-click="addAccountAndLoginAction()" ng-disabled="accountForm.$invalid" disabled>Add account</button>
            </div>
            <div class="login-form__credentials-message">
                Credentials stored via <a href="https://atom.github.io/node-keytar/" target="_blank">Keychain</a>
            </div>
        </form>
    </div>
</div>
<ng-include src="'./app/views/shared/_footer.html'"></ng-include>